<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <img :src="getSrc"/>
    <img :src="imageData[i].src"/>
    <hr/>
    <button v-for="i in 5" @click="changeIndex(i-1)">{{i}}</button>
</div>
</body>
</html>
<script src="../js/vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                imageData: [
                    {id: 1, name: '家门口的大湖', src: '../image/1.png'},
                    {id: 2, name: '河对岸树下的猴子', src: '../image/2.png'},
                    {id: 3, name: '下雪天的景色', src: '../image/3.png'},
                    {id: 4, name: '家里养的宠物', src: '../image/4.png'},
                    {id: 5, name: '额 (⊙o⊙)… 这个？', src: '../image/5.png'}
                ],
                i: 0
            }
        },
        methods: {
            changeIndex(i) {
                this.i = i
            }
        },
        computed: {
            getSrc: function () {
                return this.imageData[this.i].src
            }
        }
    })
</script>